<template>
    <div id="postContent">
      <!-- 当页面在index显示 -->
      <div
        class="post-content-title"
        v-if="currPage==='index'"
      >
        <div v-show="isLogin">
          <span
            class="my-follow"
            @click="currContent='my-follow'"
            :class="{title_active : currContent==='my-follow'}"
          >我的关注</span>
          <span>/</span>
      </div>
        <!--// 保存是“最新”还是“我的关注”
        currContent : 'newest'-->
        <span
          class="newest"
          @click="currContent='newest'"
          :class="{title_active: currContent === 'newest'}"
        >最新</span>
      </div>
      <!-- 当页面在personalCenter显示 -->
      <div
        v-else        class="post-content-title"
      >
          <span
            class="my-follow"
            @click="currContent='my-follow'"
            :class="{title_active : currContent==='my-follow'}"
          >
            经验帖
          </span>
        <span>/</span>
        <span
          class="newest"
          @click="currContent='newest'"
          :class="{title_active: currContent === 'newest'}"
        >问题贴</span>
      </div>

      <div class="content">
        <!-- 帖子的展示列表  根据数据动态渲染中间需要一个过度数据 -->
        <ul class="post-items">
          <li class="post-item">
            <img class="post-user-head" src="../../../../assets/img/user/userHead.png" alt="用户头像">
            <div class="post-item-content">
              <div class="post-describe">
              <span class="username">username</span>
              <span class="time">2017-12-12</span>
              <span class="class">前端·后端</span>
            </div>
              <div class="post-title">前端进阶：React 企业管理系统开发指南</div>
              <div class="user-action">
                <span class="like iconfont icon-zan1">12</span><span class="iconfont icon-pinglun commentsNum">32</span>
              </div>
            </div>
          </li>
          <li class="post-item">
            <img class="post-user-head" src="../../../../assets/img/user/userHead.png" alt="用户头像">
            <div class="post-item-content">
              <div class="post-describe">
                <span class="username">username</span>
                <span class="time">2017-12-12</span>
                <span class="class">前端·后端</span>
              </div>
              <div class="post-title">前端进阶：React 企业管理系统开发指南</div>
              <div class="user-action">
                <span class="like iconfont icon-zan1">12</span><span class="iconfont icon-pinglun commentsNum">32</span>
              </div>
            </div>
          </li>
          <li class="post-item">
            <img class="post-user-head" src="../../../../assets/img/user/userHead.png" alt="用户头像">
            <div class="post-item-content">
              <div class="post-describe">
                <span class="username">username</span>
                <span class="time">2017-12-12</span>
                <span class="class">前端·后端</span>
              </div>
              <div class="post-title">前端进阶：React 企业管理系统开发指南</div>
              <div class="user-action">
                <span class="like iconfont icon-zan1">12</span><span class="iconfont icon-pinglun commentsNum">32</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'postContent',
    props : {
      isLogin : {
        default : false,
        type : Boolean
      },
      // 用原来判断当前页面是在  main 还是personalcenter
      currPage : {
        default: 'index',
        type : String
      }
    },
    data (){
      return {
        // 保存是“最新”还是“我的关注”
        currContent : 'newest'
      }
    }
  }
</script>

<style scoped>
  @import '../../../../assets/css/postItem.css';
  #postContent {
    float: right;
    background-color: white;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }
  /* post-title开始 */
  .post-content-title {
    height: 40px;
    border-bottom: 1px solid #e0e1e2;
    padding-left: 20px;
    line-height: 40px;
    overflow: hidden;
    color: #71777c;
  }
  .post-content-title>div,.post-content-title>span{
    float: left;
  }
  .post-content-title span {
    margin-right: 20px;
  }
  .post-content-title span.title_active{
    color: #0076ec;
  }

  .post-content-title span:hover {
    color: #007fff;
    cursor: pointer;
  }

  .post-content-title>div span:last-child:hover {
    color: #000;
    cursor: default;
  }
  /* post-title结束 */
</style>
